<template>
  <div class="header">
    <img src="../../assets/img/logo.png" alt="加载失败">
    <van-search v-model="value" placeholder="搜好货" background="#f2f2f2" />
      <van-icon name="map-marked" size="20px" />
      <span>宁波市</span>      
  </div>
  <div class="banner">
     <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in lunbo" :key="item">
        <img :src="item" alt="加载失败">
      </van-swipe-item>
    </van-swipe> 
  </div>
  <div class="nav">
    <van-grid :column-num="5">
      <van-grid-item v-for="value in picList" :key="value.imgUrl" :icon="value.imgUrl" :text="value.title" />
    </van-grid>
  </div>
  <div class="main">
    <p class="name">
      <span :class="{active:flag==0}" @click="latestpurchase">最新供应信息</span>
      <span :class="{active:flag==1}" @click="latestsupply">最新采购信息</span>
    </p>
  </div>
  <router-view />
</template>

<script>
import { computed, onMounted, ref, watch } from 'vue';
import shuiguo from '../../assets/img/shuiguo.png';
import shucai from '../../assets/img/shucai.png';
import liangyou from '../../assets/img/liangyou.png';
import shiyongjun from '../../assets/img/shiyongjun.png';
import zhongyaocai from '../../assets/img/zhongyaocai.png';
import chuqin from '../../assets/img/chuqin.png';
import shuichan from '../../assets/img/shuichan.png';
import ganguo from '../../assets/img/ganguo.png';
import chaye from '../../assets/img/chaye.png';
import gengduo from '../../assets/img/gengduo.png';
import router from '../../router';
export default {
   setup() {
    const value = ref('');
    const active = ref(0);
    const lunbo=ref([]);
    const picList=ref([
      {
        title:"水果",
        imgUrl:shuiguo,
      },
      {
        title:"蔬菜",
        imgUrl:shucai,
      },
      {
        title:"粮油",
        imgUrl:liangyou,
      },
      {
        title:"食用菌",
        imgUrl:shiyongjun,
      },
      {
        title:"中药材",
        imgUrl:zhongyaocai,
      },
      {
        title:"畜禽",
        imgUrl:chuqin,
      },
      {
        title:"水产",
        imgUrl:shuichan,
      },
      {
        title:"干果",
        imgUrl:ganguo,
      },
      {
        title:"茶叶",
        imgUrl:chaye,
      },
      {
        title:"更多",
        imgUrl:gengduo,
      },
    ]);
    const flag=ref(0);
    const path=router.currentRoute;
    let newPath="";
    const getLunBo=()=>{
      fetch("http://www.pudge.wang:5000/api/banner/list")
      .then(response=>response.json())
      .then(res=>{
        let arr=res.result.list;
        let str=res.result.prefix;
        let newArr=arr.map((item)=>{
          return "http://"+str+item; 
        });
        lunbo.value=[...newArr]
      })
    };
    const latestpurchase=()=>{
      localStorage.setItem("flag","0")
      flag.value=0
      router.push('/latestpurchase');
    }
    const latestsupply=()=>{
      localStorage.setItem("flag","1")
      flag.value=1
      router.push('/latestsupply/'+"buyTag");
    }
    onMounted(()=>{
      if(localStorage.getItem("flag")){
        flag.value=localStorage.getItem("flag")
      };

      getLunBo();
    });
    return{newPath,path,value,active,lunbo,picList,getLunBo,flag,latestpurchase,latestsupply}
  },
}
</script>

<style scoped>
.header{
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.header span{
  font-size: 20px;
}
.header img{
  width: 50px;
  height: 20px;
}
.van-search{
    margin: 0 auto;
    width: 60%;
}

.banner{
  padding: 54px 10px 0 10px;
  box-sizing: border-box;
  background-color: #f2f2f2;
}
.banner img{
  width: 100%;
  height: 100%;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  height: 200px;
  text-align: center;
  background-color: #39a9ed;
  border-radius: 14px;
  overflow: hidden;
}
.nav{
  box-sizing: border-box;
  padding: 0 10px;
  background: #f2f2f2;
}

.main{
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}
.main .name{
  margin: 0;
  /* color: #4cc79b; */
  color: gray;
  font-size: 18px;
  padding: 5px 0;
  border-bottom: 1px solid #f2f2f2;
}
.active{
  color: #4cc79b;
  font-size: 22px;
}
.main .name span{
  margin-right: 30px;
}

.footer{
  width: 100%;
  height: 98px;
}
</style>